<template>
  <MainDetails />
  <BgLine/>
  <BackGroundBox>
    <div class="_main">
      <div class="_main_name">—— {{$t("blind.buyBox")}} ——</div>
      <div class="_main_item">
        <div :class="'_main_item_'+item.type" v-for="(item, i) in data" @click="() => jumpBuy(item.id)">
          <div class="_main_item_1_1">
            <div>{{item.type === 1? $t("blind.superBox"):
              item.type === 2? $t("blind.specialBox"): $t("blind.commonBox")}}</div>
            <div>{{item.costCoinNum}}{{item.coinName}}</div>
          </div>
          <div class="_main_item_1_2">{{item.type === 1? $t("blind.superBoxRate"): item.type === 2?
            $t("blind.specialBoxRate"): $t("blind.commonBoxRate")}}</div>
        </div>
      </div>
    </div>
  </BackGroundBox>
</template>

<script>
  import BackGroundBox from '@components/BackGroundBox/index.vue';
  import MainDetails from "@components/MainDetails/index.vue";
  import BgLine from '@components/BgLine/index.vue';
  import http from "../../http";
  export default {
    data(){
      return {
        data: []
      }
    },
    methods: {
      getBox: async function(){
        let res = await http.get(`/api/blind-box/list`);
        if (res.code === 200) {
          this.data = res.data;
        }
      },
      jumpBuy: function(id){
        this.$router.push("/BuyBlindBox?id=" + id );
      }
    },
    mounted() {
      this.getBox();
    },
    components: {
      BackGroundBox,
      MainDetails,
      BgLine,
    }
  }

</script>

<style scoped lang="scss">
  ._main {
    padding: 18px 30px 0;
  }
  ._main_name {
    font-size: 18px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color3;
    line-height: 25px;
  }
  ._main_item {
    margin-top: 19px;
  }
  ._main_item_1 {
    width: 100%;
    height: 140px;
    padding-left: 100px;
    padding-top: 39px;
    padding-right: 15px;
    background: url("@/assets/OpenBlindBox/box1.png") no-repeat center;
    background-size: cover;
    ._main_item_1_1 {
      @include flex;
      div {
        &:nth-child(1) {
          font-size: 15px;
          color: #2E2101;
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #873A22;
        }
      }
    }
    ._main_item_1_2 {
      font-size: 12px;
      @include fontTCRegular;
      font-weight: 400;
      color: #2E2101;
      text-align: left;
      margin-top: 6px;
    }
  }

  ._main_item_2 {
    width: 100%;
    height: 140px;
    padding-left: 22px;
    padding-top: 39px;
    padding-right: 100px;
    background: url("@/assets/OpenBlindBox/box2.png") no-repeat center;
    background-size: cover;
    ._main_item_1_1 {
      @include flex;
      margin-bottom: 6px;
      div {
        &:nth-child(1) {
          font-size: 15px;
          color: #570307;
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #A30123;
        }
      }
    }
    ._main_item_1_2 {
      font-size: 12px;
      @include fontTCRegular;
      font-weight: 400;
      color: #570307;
      text-align: left;
      /*margin-top: 6px;*/
    }
  }

  ._main_item_3 {
    width: 100%;
    height: 140px;
    padding-left: 100px;
    padding-top: 39px;
    background: url("@/assets/OpenBlindBox/box3.png") no-repeat center;
    background-size: cover;
    padding-right: 31px;
    ._main_item_1_1 {
      @include flex;
      margin-bottom: 6px;
      div {
        &:nth-child(1) {
          font-size: 15px;
          color: #02224A;
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #11488D;
        }
      }
    }
    ._main_item_1_2 {
      font-size: 12px;
      @include fontTCRegular;
      font-weight: 400;
      color: #02224A;
      text-align: left;
      /*margin-top: 6px;*/
    }
  }
</style>
